import React, { useEffect } from "react";
import "./App.scss";
import { useSelector, useDispatch } from "react-redux";
import axios from "axios";
import { Tabs, ProductCard } from "react-vant";
import { fetchList } from "./store";

const App = () => {
  const list = useSelector((state) => state.list);
  const dispatch = useDispatch();
  
  const titles = ["全部", "待付款", "待发货", "待收货", "待评价"];
  useEffect(() => {
    dispatch(fetchList())
  }, []);
  return (
    <div className="app">
      <Tabs>
        {titles.map((v, i) => {
          return (
            <Tabs.TabPane key={i} title={v}>
              {list
                .filter((item) => {
                  if (v === "全部") return true;
                  return v === item.type;
                })
                .map((v, i) => {
                  return (
                    <ProductCard
                      key={i}
                      num={v.count}
                      price={v.price.toFixed(2)}
                      desc={v.type}
                      title={v.title}
                      thumb={v.image}
                      lazyload
                    />
                  );
                })}
            </Tabs.TabPane>
          );
        })}
      </Tabs>
    </div>
  );
};

export default App;
